import base from "../base.js";
import studentsApi from "../../api/students.js";
import UpdateStudent from "./update.js";
import AddStudent from "./add.js";
import Imgs from "./imgs.js"
import config from "../../util/config.js";

// 学生列表

export default class extends base {
    constructor(props) {
        super(props);
        this.data = {
            page: 1,
            limit: 30,
            total: 0,
            maxPage: 0,
            rows: []


        }
    }
    async getStudents() {
        let {
            page,
            limit
        } = this.data
        const data = await studentsApi.get({
            page,
            limit
        });
        Object.assign(this.data, data)
        this.rerender()
    }

    rerender() {
        this.tbodyEle.html(`
${this.data.rows.map(item=>{
 return`
 <tr>
<td>
${item.name}
</td>
<td>
${item.age}
</td>
<td>
${item.sex}
</td>
<td>
${item.class.name}
</td>
<td>
${item.tel}
</td>
<td>
${item.email}
</td>
<td>
${item.city}
</td>
<td>
<button _id="${item._id}" class="update-btn">修改</button>
<button class="">删除</button>
</td>
<td>
<img _id="${item._id}"class="check-img" src="${config["resource-server"]}${item.imgs[0]}" alt="图片" style="width: 40px;">
</td>

</tr>`
})}

`)

        const options = [];
        for (let i = 1; i <= this.data.maxPage; i++) {
            options.push(`<option value="${i}">${i}</option>`)
        }
        this.curPageEle.html(options.join('')).val(this.data.page)
        this.totalEle.html(this.data.total)
        this.maxPage.html(this.data.maxPage)
    }

    moutend() {
        this.getStudents()
    }

    render() {

        this.el.html(

            ` 
            <table class="layui-table">
            
            <thead>
                <tr>
                    <th>
                        姓名
                    </th>
                    <th>
                        年龄
                    </th>
                    <th>
                        性别
                    </th>
                    <th>
                        班级
                    </th>
                    <th>
                        电话
                    </th>
                    <th>
                        邮箱
                    </th>
                    <th>
                        家庭地址
                    </th>
                    <th>
                        操作
                    </th>
                    <th>
                   图片
                </th>
                </tr>
            </thead>
            <tbody class="tbodyEle"> </tbody>
        </table>
        <div>
          当前页 <select name="" id="" class=curPage></select>
       每页显示的条数 <input class="eachPage" type="text" value="${this.data.limit}">;
       总条数<span class="total">${this.data.total}</span>
       总页数<span class="maxPage">${this.data.maxPage}</span>

        </div>
        <button class="add-but">新增学生</button>
        `
        )
        this.addBut = $(".add-but");
        this.totalEle = $(".total");
        this.maxPage = $(".maxPage")
        this.tbodyEle = $(".tbodyEle");
        this.curPageEle = $('.curPage');
        this.eachPage = $(".eachPage");
        this.tableEle = $(".layui-table th");
        this.tableEle.css({
            textAlign: "center",
        })
    }

    handle() {
        // 第几页
        this.curPageEle.on("change", e => {
            this.data.page = ~~e.target.value;
            this.getStudents()
        })
        // 每页需要多少条数据
        this.eachPage.on("blur", e => {
            this.data.limit = ~~e.target.value;
            this.data.page = 1
            this.getStudents()

        })
        this.addBut.on("click", e => {
            // 添加学生
            location.hash = "#/info/add-students"
        })
        // 更新数据。
        this.tbodyEle.on("click", ".update-btn", e => {
            // find（）数组的方法。查询与条件匹配的数据。
            const student = this.data.rows.find(item => item._id === $(e.target).attr("_id"))
            // 新的页面需要修改的信息页面

            location.hash = `#/info/update-students/${student._id}`
            // new UpdateStudent(student);
        }).on("click", ".check-img", e => {
            // 查看图片
            //    new Imgs() 
            location.hash = `#/info/studentsImg/${$(e.target).attr("_id")}`

        })

    }

}












// layui表格
// export default class extends base {

//     render() {

//         $("main").html(`

//               <table id="stutable" lay-filter="students"></table>

//           `);

//         const toolbar = `<div class="layui-btn-container">

//                           <a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a>

//                           <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>

//                       </div>`;

//         const toolbarhead = `<div class="layui-btn-container">

//                                   <form lay-filter="select" class="layui-form layui-inline">

//                                       <div class="layui-inline" style="width:90px">

//                                           <select name="type" lay-verify="required">

//                                               <option value="name">按姓名</option>

//                                               <option value="classId">按班级</option>

//                                               <option value="age">按年龄</option>

//                                               <option value="sex">按性别</option>

//                                           </select>

//                                           </div>

//                                       <div class="layui-inline">

//                                           <input class="layui-input" name="val" autocomplete="off" placeholder="请输入查询内容">

//                                       </div>

//                                   </form>

//                                   <button class="layui-btn layui-btn-sm" lay-event="search">搜索学生</button>

//                                   <button class="layui-btn layui-btn-sm" lay-event="view">查看所有学生</button>

//                                   <button class="layui-btn layui-btn-sm" lay-event="add">添加学生</button>

//                                   <button class="layui-btn layui-btn-danger layui-btn-sm" lay-event="delete">删除选中学生</button>

//                               </div>`;

//         studentsApi.layuilist({
//             toolbar,
//             toolbarhead
//         });



//     }

//     handle() {

//         const upstr = `<div class="layui-form-item">

//                         <input type="text" name="name" required lay-verify="required" placeholder="请输入学生姓名" autocomplete="off" class="layui-input">

//                     </div>

//                     <div class="layui-form-item">

//                         <input type="text" name="age" required lay-verify="required|number" placeholder="请输入学生年龄" autocomplete="off" class="layui-input">

//                     </div>

//                     <div class="layui-form-item">

//                         <select name="classId" lay-verify="required">

//                             <option value="">请选择班级</option>

//                             <option value="1">1</option>

//                             <option value="2">2</option>

//                             <option value="3">3</option>

//                             <option value="4">4</option>

//                             <option value="5">5</option>

//                         </select> 

//                     </div>

//                     <div class="layui-form-item">

//                         <input type="text" name="tel" required lay-verify="required|phone" placeholder="请输入学生联系方式" autocomplete="off" class="layui-input">

//                     </div>

//                     <div class="layui-form-item">

//                         <input type="text" name="email" required lay-verify="required|email" placeholder="请输入学生邮箱" autocomplete="off" class="layui-input">

//                     </div>

//                     <div class="layui-form-item">

//                         <input type="radio" name="sex" value="男" title="男" checked>

//                         <input type="radio" name="sex" value="女" title="女">

//                     </div>`;

//         //     //表头工具事件

//         layui.table.on('toolbar(students)', async obj => {

//             switch (obj.event) {

//                 //查看所有学生

//                 case "view":
//                     await layui.table.reload("stutable");
//                     break;

//                     //搜索

//                 case "search":

//                     ajax.select(layui.form.val("select"));

//                     break;

//                     //添加学生

//                 case "add":

//                     var type = $(".layui-btn").eq(2).data('type');

//                     //   创建弹窗
//                     layui.layer.open({

//                         type: 1

//                             ,
//                         area: '400px'

//                             ,
//                         id: 'layerDemo' + type //防止重复弹出

//                             ,
//                         title: ['添加学生', 'font-size:18px;']

//                             ,
//                         content: `<form class="layui-form showform addstu" action="" style="padding:20px 50px"> ` + upstr + `<div class="layui-form-item">

//                         <button class="layui-btn" lay-submit lay-filter="addstu">添加学生</button>

//                         <button type="reset" class="layui-btn layui-btn-primary">重置</button>

//                     </div></form>`

//                             //添加学生

//                             ,
//                         success() {

//                             layui.form.on('submit(addstu)', function (data) {

//                                 layui.layer.closeAll();

//                                 ajax.add(data.field);

//                                 layui.layer.msg("添加成功！");

//                                 ajax.reload();

//                                 return false

//                             });

//                         }

//                         ,
//                         shade: 0.2

//                     });

//                     layui.form.render();

//                     break;

//                 case "delete":

//                     const checkStatus = layui.table.checkStatus(obj.config.id); //获取选中数据

//                     console.log(checkStatus);

//                     // layui.layer.confirm(`真的要删除选中学生吗？`, function (index) {

//                     //     

//                     //     layer.close(index);

//                     // });

//                     break;

//             }

//         });

//             //行工具事件

//             layui.table.on("tool(students)", obj => {

//                 switch (obj.event) {

//                     case 'del': {

//                         layui.layer.confirm(`真的要删除选中学生吗？`, function (index) {

//                             obj.del();

//                             layer.close(index);

//                             console.log(obj.data);

//                             ajax.delete(obj.data);

//                             ajax.reload();

//                         });

//                         break;

//                     }

//                     case "edit":{

//                         break;

//                     }

//                 }

//             })

//     }

// }